<template>
    <div>
        <a-card title="广告管理" :bordered="false">
            <template #extra><a href="#">查看广告位图里位置说明</a></template>
            <div>
                <a-alert type="warning" style="border-left: 5px solid rgb(255 229 143);">
                    <template #description>
                    <p style="color: rgb(255 200 1);">
                        系统内置广告位不能删
                    </p>
                    <p style="color: rgb(255 200 1);">
                        自定义广告位调用名不可以以“QS_”开头
                    </p>
                    </template>
                </a-alert>
            </div>
            <a-table 
                :columns="columns" 
                :data-source="datas" 
                style="margin-top: 5vh;" 
                :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
                :pagination="false"
                :rowKey="(data)=>data.id"
            >
                <template #action="{ column,record }">
                    <a style="margin: 2px;" @click="showModal2(record)">编辑</a>
                    <a style="margin: 2px;" @click="del(record.id)">删除</a>
                </template>
                <template #sdata="{ column,record }">
                    <a-tag color="green" v-if="record.yesisno==1">显示</a-tag>
                    <a-tag v-if="record.yesisno==0">隐藏</a-tag>
                </template>
                <template #ggname="{ column,record }">
                    <a-popover placement="right">
                        <template #content>
                            <img :src="record.gg_img" style="height: 80px;" alt="">
                        </template>
                        <span>{{record.ggname}}<PictureOutlined /></span>
                    </a-popover>
                </template>
            </a-table>
            <br>
            <div style="display: flex;">
                <div style="flex: 1;">
                    <a-button type="primary" @click="showModal">添加广告位</a-button>
                    <a-button type="primary" danger style="margin-left: 10px;">删除所选</a-button>
                </div>
                <a-pagination
                    v-model:current="page"
                    v-model:page-size="page_size"
                    :total="count"
                    :show-total="total => `共 ${count} 条`"
                    show-size-changer
                    show-quick-jumper
                    @change="PageChange"
                    @showSizeChange="showSizeChange"
                />
            </div>
        </a-card>
        <a-modal v-model:visible="visible" title="添加广告位" @ok="handleOk">
            <a-form :model="formState" :label-col="labelCol" :wrapper-col="wrapperCol">
                <a-form-item label="广告位">
                    <a-select v-model:value="formState.bt" placeholder="请选择所属平台">
                        <a-select-option value="App">App</a-select-option>
                        <a-select-option value="触屏端">触屏端</a-select-option>
                        <a-select-option value="微信小程序">微信小程序</a-select-option>
                        <a-select-option value="pc端">pc端</a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item label="广告标题">
                    <a-input v-model:value="formState.ggname" />
                </a-form-item>
                <a-form-item label="本地上传">
                    <a-upload
                        v-model:file-list="fileList"
                        name="avatar"
                        list-type="picture-card"
                        class="avatar-uploader"
                        :show-upload-list="false"
                        action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                        :before-upload="beforeUpload"
                        @change="handleChange"
                    >
                        <img v-if="imageUrl" :src="imageUrl" alt="avatar" />
                        <div v-else>
                        <loading-outlined v-if="loading"></loading-outlined>
                        <plus-outlined v-else></plus-outlined>
                        <div class="ant-upload-text">Upload</div>
                        </div>
                    </a-upload>
                </a-form-item>
                <a-form-item label="或图片地址">
                    <a-input v-model:value="formState.gg_img" />
                </a-form-item>
                <a-form-item label="图片说明文字">
                    <a-input v-model:value="formState.tpsm" />
                </a-form-item>
                <a-form-item label="开始时间">
                    <a-date-picker
                        v-model:value="formState.ks"
                        show-time
                        type="date"
                        placeholder="Pick a date"
                        style="width: 100%"
                    />
                </a-form-item>
                <a-form-item label="到期时间">
                    <a-date-picker
                        v-model:value="formState.dq"
                        show-time
                        type="date"
                        placeholder="Pick a date"
                        style="width: 100%"
                    />
                </a-form-item>
                <a-form-item label="排序">
                    <a-input v-model:value="formState.px" />
                </a-form-item>
                <a-form-item label="是否显示">
                    <a-switch v-model:checked="checked" @change="sdata"/>
                </a-form-item>
            </a-form>
        </a-modal>
        <a-modal v-model:visible="visible2" title="修改广告位" @ok="handleOk2">
            <a-form :model="formState2" :label-col="labelCol" :wrapper-col="wrapperCol">
                <a-form-item label="广告位">
                    <a-select v-model:value="formState2.bt" placeholder="请选择所属平台">
                        <a-select-option value="App">App</a-select-option>
                        <a-select-option value="触屏端">触屏端</a-select-option>
                        <a-select-option value="微信小程序">微信小程序</a-select-option>
                        <a-select-option value="pc端">pc端</a-select-option>
                    </a-select>
                </a-form-item>
                <a-form-item label="广告标题">
                    <a-input v-model:value="formState2.ggname" />
                </a-form-item>
                <a-form-item label="本地上传">
                    <a-upload
                        v-model:file-list="fileList"
                        name="avatar"
                        list-type="picture-card"
                        class="avatar-uploader"
                        :show-upload-list="false"
                        action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                        :before-upload="beforeUpload"
                        @change="handleChange"
                    >
                        <img v-if="formState2.gg_img" :src="formState2.gg_img" style="height: 50px;" alt="avatar" />
                        <div v-else>
                        <loading-outlined v-if="loading"></loading-outlined>
                        <plus-outlined v-else></plus-outlined>
                        <div class="ant-upload-text">Upload</div>
                        </div>
                    </a-upload>
                </a-form-item>
                <a-form-item label="或图片地址">
                    <a-input v-model:value="formState2.gg_img" />
                </a-form-item>
                <a-form-item label="图片说明文字">
                    <a-input v-model:value="formState2.tpsm" />
                </a-form-item>
                <a-form-item label="开始时间">
                    <a-date-picker
                        v-model:value="formState2.ks"
                        show-time
                        type="date"
                        placeholder="Pick a date"
                        style="width: 100%"
                    />
                </a-form-item>
                <a-form-item label="到期时间">
                    <a-date-picker
                        v-model:value="formState2.dq"
                        show-time
                        type="date"
                        placeholder="Pick a date"
                        style="width: 100%"
                    />
                </a-form-item>
                <a-form-item label="排序">
                    <a-input v-model:value="formState2.px" />
                </a-form-item>
                <a-form-item label="是否显示">
                    <a-switch v-model:checked="checked2" @change="sdata2"/>
                </a-form-item>
            </a-form>
        </a-modal>
    </div>
</template>

<script setup>
import { message } from 'ant-design-vue'
import { PictureOutlined } from '@ant-design/icons-vue';
import { reactive, ref,toRefs,onMounted } from 'vue'
import {getguanggaolist,addguanggaolist,delguanggaolist,putguanggaolist} from '../../../api/guanggaolist'

    let value1 = ref('')
    let value2 = ref('标题')
    let value3 = ref('不限平台')
    let value4 = ref('不限广告位')
    let value5 = ref('不限显示状态')
    let value6 = ref('不限到期时间')
    let checked = ref(true)
    let checked2 = ref('')
    let count = ref(0)
    let page = ref(1)
    let page_size = ref(10)
    let {
            options,
            columns,
            datas,
            selectedRowKeys,
            loading,
            formState,
            formState2,
        } = toRefs(reactive({
        options:[
            {
                value: 'zhejiang',
                label: 'Zhejiang',
                children: [
                {
                    value: 'hangzhou',
                    label: 'Hangzhou',
                    children: [
                    {
                        value: 'xihu',
                        label: 'West Lake',
                    },
                    ],
                },
                ],
            },
            {
                value: 'jiangsu',
                label: 'Jiangsu',
                children: [
                {
                    value: 'nanjing',
                    label: 'Nanjing',
                    children: [
                    {
                        value: 'zhonghuamen',
                        label: 'Zhong Hua Men',
                    },
                    ],
                },
                ],
            }
        ],
        columns:[
            { title: '广告标题', slots:{customRender:'ggname'}, key: 'id' },
            { title: '所属平台', dataIndex: 'bt', key: 'id' },
            { title: '所属广告位',  dataIndex: 'bt', key: 'id' },
            { title: '开始时间', dataIndex: 'ks', key: 'id'},
            { title: '到期时间', dataIndex: 'dq', key: 'id'},
            { title: '排序', dataIndex: 'px', key: 'id'},
            { title: '是否显示', slots:{customRender:'sdata'}, key: 'id'},
            {
                title: 'Action',
                key: 'operation',
                fixed: 'right',
                width: 100,
                slots:{customRender:'action'}
            },
        ],
        formState:{
            bt:'',
            ggname:'',
            gg_img:'',
            tpsm:'',
            ks:'',
            dq:'',
            px:'',
            yesisno:1,
        },
        formState2:{},
        datas:[],
        selectedRowKeys: [],
        loading: false,
    }))
    const getdata =async ()=>{
        let {data} =await getguanggaolist({page:page.value,page_size:page_size.value})
        count.value=data.count
        datas.value=data.data
        console.log(data);
    }
     // 改变页数触发
     const PageChange = (v) =>{
        page.value = v
        getdata()
    }

    // 改变每页条数触发
    const showSizeChange = (v,v1) =>{
        page_size.value = v1
        getdata()
    }
    // 添加
    const visible = ref(false);

    const showModal = () => {
      visible.value = true;
    };

    const handleOk = async()=> {
      console.log(formState.value);
      let {data} =await addguanggaolist(formState)
      data.code == 200 ? (message.success(data.msg),getdata()) : message.error(data.msg)
      visible.value = false;
    };
    // 删除
    const del =async (id)=>{
        let {data} = await delguanggaolist(id)
        data.code == 200 ? (message.success(data.msg),getdata()) : message.error(data.msg)
    }
    // 修改
    const visible2 = ref(false);

    const showModal2 = (v) => {
        formState2.value=v
        if(v.yesisno==1){
            checked2.value=true
        }else{
            checked2.value=false
        }
        visible2.value = true;
    };

    const handleOk2 = async()=> {
      console.log(formState.value);
      let {data} =await putguanggaolist(formState2)
      data.code == 200 ? (message.success(data.msg),getdata()) : message.error(data.msg)
      visible2.value = false;
    };
    const sdata2 = (e)=>{
        if(e){
            formState2.value.yesisno=1
            console.log(formState2.value.yesisno);
        }else{
            formState2.value.yesisno=0
            console.log(formState2.value.yesisno);
        }
        console.log(e);
    }
    // 状态
    const sdata = (e)=>{
        if(e){
            formState.value.yesisno=1
            console.log(formState.value.yesisno);
        }else{
            formState.value.yesisno=0
            console.log(formState.value.yesisno);
        }
        console.log(e);
    }

    const onSelectChange = selectedRowKeys => {
      console.log('selectedRowKeys changed: ', selectedRowKeys);
      selectedRowKeys.value = selectedRowKeys;
    };
    onMounted(()=>{
        getdata()
    })
</script>

<style scoped>
    
</style>